<!DOCTYPE html>
<html lang="en">

<head>
    <title>OpenDRIVE Viewer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        table {
            border-spacing: 0.5em 0;
        }

        .popup_info {
            text-align: left;
            font-family: monospace;
            display: block;
            color: whitesmoke;
        }

        .bottom_info {
            position: absolute;
            top: 1em;
            left: 1em;
        }
    </style>
    <link rel="stylesheet" href="/lib/notyf.min.css">
    <link rel="stylesheet" href="/lib/font-awesome.min.css">
</head>

<body>
    <div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
    <div class="popup_info bottom_info" id="spotlight_info"></div>
    <input id="xodr_file_input" type="file" style="visibility:hidden" onchange="onFileSelect(this.files[0])" />

    <div id="ThreeJS" style="position: absolute; bottom: 0.1em; right: 0.1em; font-size: 2.5em;">
        <a class="icon" target="_blank" href="http://github.com/grepthat/libOpenDRIVE" title="github", style="color: lightgray;">
            <i class="fa fa-github"></i>
        </a>
    </div>

    <script id="idVertexShader" type="x-shader/x-vertex">
        attribute vec4 id;
        varying vec4 vId;

        void main() { 
            vId = id;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
    </script>

    <script id="idFragmentShader" type="x-shader/x-vertex">
        varying vec4 vId;
        
        void main() {
            gl_FragColor = vId;
        }
    </script>

    <script id="xyzVertexShader" type="x-shader/x-vertex">
        varying vec3 vXYZ;

        void main() { 
            vXYZ = position;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
    </script>

    <script id="xyzFragmentShader" type="x-shader/x-vertex">
        varying vec3 vXYZ;
        
        void main() {
            gl_FragColor = vec4(vXYZ, 1.0);
        }
    </script>

    <script id="stVertexShader" type="x-shader/x-vertex">
        attribute vec2 st;
        varying vec2 vST;

        void main() { 
            vST = st;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
    </script>

    <script id="stFragmentShader" type="x-shader/x-vertex">
        varying vec2 vST;
        
        void main() {
            gl_FragColor = vec4(vST.x, vST.y, 0.0, 1.0);
        }
    </script>

    <script src="./ModuleOpenDrive.js"></script>
    <script src="./lib/three.min.js"></script>
    <script src="./lib/orbitcontrols.min.js"></script>
    <script src="./lib/dat.gui.min.js"></script>
    <script src="./lib/notyf.min.js"></script>
    
    <script src="./controls.js"></script>
    <script src="./main.js"></script>
</body>

</html>